<template>
  <div class="kcsc_box">
    <header-comm></header-comm>
    <div class="bcg">
      <div class="kcsc">
        <div class="kcsc_sm">
          <h3>库存上传规则说明：</h3>
          <div class="list">
            <ul>
              <li>1.仅支持Excel表格直接上传，建议使用2003-2007版本；文件不应大于2M。</li>
              <li>2.需要包含品牌、型号、价格、可供数量才能上传成功。</li>
              <li>3.品牌、型号、价格、产地相同的数据视为同一条数据。</li>
            </ul>
          </div>

          <div class="up_shangchuan">
            <div class="scnum">
              <span class="left_sc">
                上传：
                <span class="red">{{total}}</span>条数据
              </span>
              <span class="up_href">
                <div>
                  <span class="xiazai">
                    <a-icon type="cloud-download" />
                    <a class="xz_up" href="http://mobile.bearing.cn/excelfile/template.xls">
                      <i>导入模板下载</i>
                    </a>
                  </span>
                  <span @click="dckc" class="xiazai">
                    <a-icon type="download" />
                    <a  class="xz_du">
                      <i>导出库存</i>
                    </a>
                  </span>
                  <span @click="ckkc" class="xiazai">
                    <a  class="xz_du">
                      <i>查看库存</i>
                    </a>
                  </span>
                </div>
              </span>
            </div>
            <div class="scexel">
              <a-upload-dragger
                name="file"
                accept=".xls, .xlsx"
                @change="Changesjdr"
                :fileList="fileList"
                :showUploadList="true"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              >
                <p class="inbox">
                  <a-icon type="inbox" />
                </p>
                <p class="ant-upload-text">上 传 文 件...</p>
              </a-upload-dragger>
            </div>
          </div>

          <div class="up_subbtn">
            <a-button type="primary" @click="scsjexl" size="large">确认导入</a-button>
            <div class="load" v-if="drload">
              <a-spin>
                <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
              </a-spin>
            </div>
            <a-button size="large" @click="clearqxdr">取消导入</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";
//上传图片
function getBase64(img, callback) {
  const reader = new FileReader();
  let file = [];
  file = reader;
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
  sessionStorage.setItem("file", reader);
}
export default {
  data() {
    return {
      //库存上传-----------------
      fileList: [
        {
          uid: "-1",
          name: ".xls/.xlsx",
          status: "done",
          url: "javascript:;"
        }
      ],
      uploading: false,
      exelUrl: "", //exel表格的baes64格式路径
      exflage: false, //exel表格
      //   sjdrmodal: false,
      xlshz: "", //上传的exel表格的后缀名
      total: "0",
      loading: false,
      drload: false
      //库存上传-----------------
    };
  },
  components: {
    headerComm
  },
  methods: {
    //数据导入--文件上传

    scsjexl() {
      if (this.exelUrl != "") {
        this.loading = true;
        this.drload = true;

        this.axios
          .post(
            "kucun/UploadBusinessKc.php",
            qs.stringify({
              sqdwid: this.$store.state.bbl_sqdwid,
              fileBase: this.exelUrl,
              fileSuffix: this.xlshz
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.loading = false;
              this.drload = false;
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.total=res.data.result

            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        this.$notification["error"]({
          message: "失败",
          description: "上传文件不能为空"
        });
        return;
      }
    },
    Changesjdr(info) {
      let fileList = [...info.fileList];
      const status = info.file.status;

      fileList = fileList.slice(-1);
      //上传中....
      if (status !== "uploading") {
      }
      //上传后....
      if (status === "done") {
        getBase64(info.file.originFileObj, xlxurl => {
          this.exelUrl = xlxurl;
          this.loading = false;
          this.file = info.file.originFileObj;
        });
        // this.sjdrmodal = true;
      } else if (status === "error") {
        this.$message.error(`${info.file.name} 上传失败.`);
      }
      fileList = fileList.map(file => {
        if (file.response) {
        }
        return file;
      });

      this.fileList = fileList;
      if (this.fileList == "") {
        this.exelUrl = "";
      }
      let name = this.fileList[0].name;
      var i = name.indexOf(".");
      var data = name.substring(i + 1, name.length);
      this.xlshz = data;
      console.log(data);
    },
    clearqxdr() {
      (this.exelUrl = ""), (this.fileList[0].name = ".xls/.xlsx");
    },
      //库存上传获取上传数量
      getNum(){
        this.axios.post("kucun/NumBusinessKc.php",qs.stringify({sqdwid:this.$store.state.bbl_sqdwid})).then(res=>{
          console.log(res)
            if(res.data.code==303){
              this.total=res.data.result.num
            }
        })
      },
      dckc(){
        this.axios.post('kucun/PushBusinessKc.php',qs.stringify({
          sqdwid:sessionStorage.getItem('sqdwid')
        })).then(res=>{
          console.log(res)
          if(res.data.code==303){
          location.href=res.data.result
            this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
          }else{
            this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
          }
        })
      },
      ckkc(){
        this.$store.state.sqdwid=this.$store.state.bbl_sqdwid
        this.$store.state.dwmc=sessionStorage.getItem("dwmc")
      this.$router.push("/kcgl");
       
      }
  },

  created() {
    this.getNum()
    // this.total = sessionStorage.getItem("total");
  }
};
</script>

<style lang='less' >
.kcsc_box {
  .kcsc {
    width: 98%;
    height: 600px;
    box-shadow: 0px 0px 7px #ccc;
    background-color: #fff;
    margin: 9px auto;
    position: relative;
    top: 63px;
    // transform: translateX(-50%);
    text-align: left;
    padding: 30px 77px;
    .kcsc_sm {
      width: 100%;
      position: relative;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    h3 {
      font-weight: bold;
      color: #666;
      font-size: 19px;
    }
    .list {
      ul {
        line-height: 36px;
        font-size: 16px;
      }
    }
    .left_sc {
      display: inline-block;
      width: 20%;
      text-align: left;
      .red {
        color: red;
        margin: 0 5px;
      }
    }
    .up_href {
      display: inline-block;
      //  margin: 30px;
      text-align: right;
      width: 80%;
      .xiazai {
        margin: 0 5px;
        .xz_up {
          color: #000;
          text-decoration: underline;
        }

        .anticon {
          font-size: 18px !important;
          color: #1890ff;
        }
        a {
          font-size: 16px;
          margin: 0 5px;
        }
      }
    }
    .up_shangchuan {
      .sc {
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
      }
      .scnum {
        padding: 10px 0;
      }
      .inbox {
        font-size: 50px;
        color: #1890ff;
      }
      .ant-upload {
        height: 130px !important;
      }
      .ant-upload.ant-upload-drag .ant-upload {
        padding: 0 !important;
      }
      // .scexel {
      //   position: relative;
      //   top: 45px;
      //   left: 14px;
      //   width: 157px !important;
      //   height: 36px;
      //   display: inline-block;
      //   border: 0 !important;
      //   height: 40px !important;
      //   .ant-upload.ant-upload-drag {
      //     width: 100% !important;
      //   }
      //   .ant-upload {
      //     padding: 0px 0 !important;
      //     border-radius: 10px !important;
      //   }
      //   .ant-upload-drag-icon {
      //     margin: 0 !important;
      //     display: inline-block !important;
      //     .anticon-cloud-upload {
      //       font-size: 30px !important;
      //       vertical-align: middle !important;
      //       margin-right: 10px;
      //     }
      //   }
      //   .ant-upload-text {
      //     display: inline-block !important;
      //     color: #fff !important;
      //   }
      //   .dr {
      //     position: absolute;
      //     top: 0;
      //     right: -92px;
      //     height: 51px;
      //   }
      // }
      // .ant-upload.ant-upload-drag .ant-upload {
      //   padding: 0px 0 !important;
      //   background-color: #1890ff !important;
      // }
      // .ant-upload.ant-upload-drag {
      //   border: 0 !important;
      // }
    }
    .up_subbtn {
      position: relative;
      width: 100%;
      margin-top: 66px;
      text-align: center;
      button {
        margin: 0 20px !important;
      }
      .load {
        position: absolute;
        background: rgba(255, 255, 255, 0.5);
        top: 0;
        right: 0;
        width: 100%;
        height: 50px;
        .ant-spin-spinning {
          position: relative;
          top: 9px;
          left: -73px;
        }
      }
    }
  }
}
</style>
